<template>
  <view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
    <view class="cu-dialog bg-white"">
<!--      <view class="cu-bar bg-white">-->
<!--        <view class="action text-green">确定</view>-->
<!--        <view class="action text-blue" @tap="hideModal">取消</view>-->
<!--      </view>-->
      <view class="popup-content">
        <view class="popup-content-main">

          <view class="picker__toolbar justify-between">
            <view class="picker__cancel" @click="cancel">取消</view>
            <!-- <view class="van-ellipsis picker__title">{{label}}</view> -->
            <view class="picker__confirm" @click="onConfirm">确认</view>
          </view>
          <view class="picker__content" >

<!--            <input class="uni-input bottom-line keyword-input" v-if="isSearch" v-model="searchVal" placeholder="输入关键字搜索" @input="search"/>-->
<!--            <view class="check__all" v-if="multiple">-->
<!--          <view class="check__all_left">全选</view>-->
<!--          <view class="check__all__right">-->
<!--            <checkbox v-model="checkedAll" name="all" @click="toggleAll" :checked="checkedAll" style="transform:scale(0.8)"/>-->
<!--          </view>-->
<!--        </view>-->

        <!-- <checkbox-group @change="change">
            <van-cell-group>
                <van-cell
                        v-for="(item, index) in columnsData"
      :key="item[option.value]"
      :title="item[option.label]"
      clickable
      @click="toggle(index)">
                    <view slot="right-icon">
       <van-checkbox ref="checkboxes" :name="item[option.value]" />
                    </view>
                </van-cell>
            </van-cell-group>
        </checkbox-group> -->

        <view class="uni-list" v-if="multiple">
          <checkbox-group @change="checkboxChange" v-if="columnsData.length>0">
            <label class="uni-list-cell uni-list-cell-pd justify-between" v-for="(item,i) in columnsData" :key="item[option.value]">
              <view class="cell-label">{{item[option.label]}}</view>
              <view>
                <checkbox :value="item[option.value]" :checked="checkboxValue.includes(item[option.value]+'')"
                          style="transform:scale(0.8)" :disabled="checkboxValue.length>=max&&checkboxValue.indexOf((item[option.value]+''))==-1"/>
              </view>
            </label>
          </checkbox-group>
          <view v-else>
            <view class="no__data">{{noData}}</view>
          </view>
        </view>
        <view class="uni-list" v-else>
          <radio-group @change="checkboxChange" v-if="columnsData.length>0">
            <label class="uni-list-cell uni-list-cell-pd justify-between" v-for="item in columnsData" :key="item[option.value]">
              <view class="cell-label">{{item[option.label]}}</view>
              <view>
                <radio :value="item[option.value]" :checked="selectValue.includes(item[option.value])" style="transform: scale(0.8);"/>
              </view>
            </label>
          </radio-group>
          <view v-else>
            <view class="no__data">{{noData}}</view>
          </view>
        </view>
      </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'NiceuiPopupSelect',
    props: {
		// maskClick
		isMaskClick: {
			type: Boolean,
			default: null
		},
		// TODO 2 个版本后废弃属性 ，使用 isMaskClick
		maskClick: {
			type: Boolean,
			default: null
		},
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
      selectValue: {
        type: Array,
        default: function () {
          return []
        }
      },
      option: {
        type: Object,
        default: function () {
          return { label: 'label', value: 'value' }
        }
      },
      max:{
        type: Number,
        default: 3
      },
      // 是否支持搜索
      isSearch: {
        type: Boolean,
        default: true
      },
       multiple: {
         type: Boolean,
         default: true
       }
    },
    computed: {
      resultLabel: {
        get () {
          if(this.columns?.length>0) {
            const res = this.columns.filter(item => {
              return this.resultValue.indexOf(item[this.option.value]) > -1
            })
            const resLabel = res.map(item => {
              return item[this.option.label]
            })
            return resLabel.join(',')
          }
        },
        set () {

        }
      }
    },
    data () {
      return {
        show: false,
        modalName:'',
        searchVal: '',
        columnsData: [],
        checkboxValue: JSON.parse(JSON.stringify(this.selectValue)),
        checkedAll: false,
        resultValue: JSON.parse(JSON.stringify(this.selectValue)),
		    noData:'没有更多内容了'
      }
    },

    methods: {
      // 搜索
      search (val) {
        console.log('search------',val)
      // #ifdef MP-WEIXIN
      // #endif
      val = val.detail.value //小程序取值

        if (val) {
        this.columnsData = this.columnsData.filter(item => {
          return item[this.option.label].indexOf(val) > -1
        })
        } else {
        this.columnsData = JSON.parse(JSON.stringify(this.columns))
        }
      },
      getData (val) {
        console.info("🚀 ~ file:niceui-popup-select method: line:163 -----",val )
        const res = this.columnsData?.filter(item => {
          let value = item[this.option.value]
          value = value+""
          // console.info("🚀 ~ file:niceui-popup-select method: line:163 -----", (item[this.option.value]) )
          return val.indexOf(value) > -1
        })
        return res
      },
      onConfirm () {
        this.resultValue = this.checkboxValue
        this.show = !this.show
        this.$emit('confirm', this.resultValue, this.getData(this.resultValue))
        this.closePopup()
        setTimeout(()=>{
          this.columnsData = []
        },500)
      },
      checkboxChange (val) {
        this.checkboxValue = val.detail.value
          //this.$emit('change', val, this.getData(this.resultValue))
      },
      cancel () {
        this.show = !this.show
        this.$emit('cancel', this.resultValue)
        setTimeout(()=>{
          this.columnsData = []
        },500)
        this.closePopup()
      },
      toggle (index) {
		    //this.$refs.checkboxes[index].toggle()
        this.checkboxValue.push(index)
      },
      toggleAll (all) {
        //this.$refs.checkboxGroup.toggleAll(this.checkedAll)
        if(this.checkedAll){
          this.checkboxValue = []
        }else{
          this.columnsData.forEach((col,index)=>{
            if(!this.checkboxValue.includes(col[this.option.value])){ //避免重复添加
              this.checkboxValue.push(col[this.option.value])
            }
          })
        }
        console.log('toggleAll--------',this.checkboxValue)
      },
      showPopup (disabled) {
        this.columnsData = []
        this.columnsData = JSON.parse(JSON.stringify(this.columns))
        this.checkboxValue = JSON.parse(JSON.stringify(this.selectValue))
        this.resultValue = JSON.parse(JSON.stringify(this.selectValue))
        // if (disabled !== undefined && disabled !== false) {
        //   return false
        // } else {
        //   //this.show = !this.show
        //   this.$refs.popup.open('bottom')
        // }
        this.modalName='bottomModal'
      },
      closePopup(){
        // this.$refs.popup.close()
        this.modalName=''
      }
    },
    watch: {
      selectValue: function (newVal) {
        this.resultValue = newVal
        this.checkboxValue = newVal
      },
      resultValue (val) {
        this.searchVal = ''
        //this.columnsData = JSON.parse(JSON.stringify(this.columns))
        //this.$emit('input', val)
      },
      columnsData: {
        handler (val) {
			 console.log('watch-------columnsData:',val)
          if (val?.length && val?.length === this.checkboxValue.length) {
            this.checkedAll = true
          } else {
            this.checkedAll = false
          }
        },
        immediate: true
      },
      checkboxValue: {
        handler (val) {
          console.log('watch-------checkboxValue:',val)
          if (val.length && val.length === this.columnsData.length) {
            this.checkedAll = true
          } else {
            this.checkedAll = false
          }
        },
        immediate: true
      }
    }
  }
</script>

<style lang="scss" >
	//结果弹窗
	.cu-dialog{
    height: 350px;
    .close-view{
      height: 130rpx;
      image{
        width: 100rpx;
        height: 100rpx;
      }
    }
  }
  .popup-content{
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background-color: #fff;
    padding: 1rpx;
    width: 100vw;
    // height: 70vh;
    // overflow-y: scroll;
    .popup-content-main{
      margin: 50rpx auto 30rpx;

      .picker__toolbar{
        box-sizing: border-box;
        margin:20rpx 32rpx;
        font-size:$uni-font-size-lg;
        display: flex;
        align-items: center;
        .picker__cancel{
          color:#969799;
        }
        .picker__confirm{
          color:#576b95;
        }
        .picker__title{
          font-size: 38rpx;
          color:#6f6f6f;
        }
      }
      .picker__content{
        max-height:500rpx;
        overflow-y:auto;

        .keyword-input{
          font-size: 35rpx;
        }
        .check__all{
          box-sizing: border-box;
          margin:20rpx 32rpx;
          padding:20rpx 0rpx;
          border-bottom:solid 1rpx #f7f7f7;
          display: flex;
          justify-content: space-between;
          .check__all_left{
            color:#666;
            font-size: 32rpx;
          }
          .check__all_right{

          }
        }

        .uni-list{
          box-sizing: border-box;
          margin:20rpx 32rpx;
          label{
            padding:20rpx 0rpx;
            border-bottom:solid 1rpx #f7f7f7;
          }
          .uni-list-cell{
            display: flex;
            justify-content: space-between;
            .cell-label{
              font-size: 35rpx;
            }
            checkbox{
              //transform:scale(0.8,0.8)
            }
          }
          .no__data{
            color:#999;
            font-size: 30rpx;
            text-align: center;
            margin-top: 50rpx;
          }
        }
      }

    }
  }

  .bottom-line{
    border-bottom: solid 3rpx #eee;
    margin:20rpx 32rpx;
    height: 72rpx;
  }
</style>
